<template>
  <div v-if="userlist">
    <div class="top">
        <div class="button">
          <span class="iconfont icon-zuoyoujiantou" @click="$router.push('/recommend')"></span>
          我的
        </div>
    </div>

    <div class="backimg" :style="'background-image: url('+userlist.profile.backgroundUrl+')'"></div>
    
    <div class="img">
      <img :src="userlist.profile.avatarUrl" alt="">
      <span>{{userlist.profile.nickname}}</span>
      <p>粉丝：100</p>
      <p>LV：{{userlist.level}}</p>
    </div>

    <div class="shouc">
      <div>
        <ul>
          <li @click="$router.push('/playcont')">
            <p class="iconfont icon-gedan"></p>
            <span>歌单</span>
          </li>
          
          <li @click="$router.push('/collection')">
            <p class="iconfont icon-huati"></p>
            <span>话题</span>
          </li>
          <li @click="$router.push('/mv')">
            <p class="iconfont icon-MV"></p>
            <span>MV</span>
          </li>
          <li @click="$router.push('/radioStation')">
            <p class="iconfont icon-diantai"></p>
            <span>电台</span>
          </li>
        </ul>
      </div>
    </div>

    <div class="recent">
      <div class="right">
        <span>每日推荐-歌曲</span>
        <span class="iconfont icon-zuo"></span>
      </div>

      <div class="recent-box">
        <div class="box" v-for="(item,index) in dlist" :key="index" @click="setId(item.id)">
          <img :style="'background-image: url('+item.al.picUrl+')'" alt="">
          <span class="name">{{item.name}}</span>
          <span>{{item.ar[0].name}}</span>
        </div>
      </div>
    </div>

    <div class="recent">
      <div class="right">
        <span>新歌速递</span>
        <span class="iconfont icon-zuo"></span>
      </div>

      <div class="recent-box">
        <div class="box" v-for="(item,index) in tlist" :key="index" @click="setId(item.id)">
          <img :style="'background-image: url('+item.album.picUrl+')'" alt="">
          <span class="name">{{item.name}}</span>
          <span>{{item.artists[0].name}}</span>
        </div>
      </div>

    </div>

    <!-- 底部组件 -->
    <bottom-nav></bottom-nav>

  </div>
</template>

<script>
import {getUserDetail,getRecommendSongs,getTopSong} from "../api/login";
import bottomNav from "../components/base/bottomNav.vue";
export default {
  data(){
    return {
      userlist:null,//用户详情
      singlist:[],//用户歌单
      daillist:null,//每日推荐
      dlist:[],//每日推荐的新数组
      toplist:null,
      tlist:[],
    }
  },
  methods:{
    setId(id){
            // this.$emit("get-play-all-id",this.$route.query.id);//传递歌单id
            this.$emit("get-player-id",id)
        },
    // 获取用户详情
    getUserDetailFun(){
      this.userId = window.localStorage.getItem("uid");
      getUserDetail({uid:this.userId}).then((data)=>{
        // console.log(data);
        this.userlist = data;
      })
    },

    //每日推荐歌曲
    getRecommendSongsFun(){
      getRecommendSongs().then((data)=>{
        // console.log(data.data.dailySongs)
        this.daillist = data.data.dailySongs
        for(let i=0;i<this.daillist.length;i++){
          if(i<4){
            this.dlist.push(this.daillist[i]) 
          }
        }
      })
    },
    //新歌速递
    getTopSongFun(){
      getTopSong({type:0}).then(data=>{
        console.log(data.data)
        this.toplist = data.data;
        for(let i=0;i<this.toplist.length;i++){
          if(i<6){
            this.tlist.push(this.toplist[i]);
          }
        }
      })
    },
  },
  created(){
      this.getUserDetailFun();
      // this.getUserPlaylistFun();
      this.getRecommendSongsFun();
      this.getTopSongFun();
      // getUserDetail().then((data)=>{
      //   console.log(data)
      // })
    
  },
  components: {
    bottomNav,
  },
}
</script>

<style lang="less">
*{
  margin: 0px;
  padding: 0px;
}
.top{
  // width: 100%;
  height: 50px;
  position: relative;
  background-color: #d4473c;
  .button{
            font-size: 18px;
            position: absolute;
            left:12px;
            top:12px;
            color:#fff;
  }
}
.backimg{
  height: 250px;
  background-size: contain;
  background-position: center;
  position: relative;
}
.img{
  height: 150px;
  background-color: white;
  position: relative;
  border: 1px solid gainsboro;
  border-radius: 10px;
  box-shadow: 0px 0px 7px 0px #888888;
  margin: -20px 10px;
  img{
      width: 100px;
      height: 100px;
      border-radius: 50%;
      position: absolute;
      margin-top: 20px;
      // left: 50%;
      margin-left: 20px;
      // background-size: 100%;
    }
    span{
      position: absolute;
      margin-top: 40px;
      margin-left: 145px;
    }
    p{
      position: absolute;
      margin-top: 60px;
      margin-left: 145px;
    }
    p:last-child{
      position: absolute;
      margin-top: 80px;
      margin-left: 145px;
    }

}
.shouc{
  // background-color: skyblue;
  margin-top: 25px;
  ul{
    // border: 1px solid #939696;
    display: flex;
    justify-content: space-around;
    // box-shadow: 0px 0px 7px 0px #888888;
    li{
      width: 50px;
      // height: 30px;
      // border: 1px solid gainsboro;
      text-align: center;
      border-radius: 20px;
      // position: relative;
      span{
        line-height: 20px;
        // position: absolute;
        // margin-top: 0px;
        vertical-align: -10px;
      }
      p{
        font-size: 25px;
        margin-top: 10px;
        text-align: center;
        // line-height: 15px;
      }
    }
  }
}
.recent{
  // background-color: burlywood;
  margin-top: 25px;
  .right{
    font-weight: bold;
    span{
      margin-left: 15px;
    }
    span:last-child{
      float: right;
      margin-right: 10px;
      margin-top: 3px;
    }
  }
  .recent-box{
    .box{
      // width: 100%;
      // border: 1px solid gainsboro;
      box-shadow: 1px 1px 5px 0px #888888;
      border-radius: 10px;
      margin-top: 5px;
      overflow: hidden;
      position: relative;
      margin: 10px 10px;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-wrap: normal;
      
      .name{
        width: 200px;
        position: absolute;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-left: 120px;
        margin-top: -95px;
        word-wrap: normal;
      }
      span:last-child{
        position: absolute;
        // float: right;
        margin-left: 120px;
        margin-top: -70px;
      }
      img{
        width: 100px;
        height: 100px;
        border-radius: 10px;
        background-size: cover;
        margin: 10px 10px;
      }
    }
  }
}
</style>